<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="main">
      <el-tabs v-model="activeName" class="mainTabs" @tab-click="handleClick">
        <el-tab-pane label="收款单(平台)" name="first">
          <div class="main_item">
            <receiptVue></receiptVue>
       
          </div>

        </el-tab-pane>
		<el-tab-pane label="收款单(运营商)" name="first1">
		  <div class="main_item">
		    <supplierVue></supplierVue>
		  </div>
		
		</el-tab-pane>
        <el-tab-pane label="付款单(司机)" name="second">
          <div class="main_item">
            <paymentVue></paymentVue>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>


  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
import paymentVue from './children/payment.vue';
import receiptVue from './children/receipt.vue';
import supplierVue from './children/supplier.vue';

export default {
  data() {
    return {
      activeName: "first",

    };
  },
  methods: {
    handleClick(tab, event) {
      ////console.log(tab, event);
    }
  },
  mounted() {
    if(this.$route.query.active){
      this.activeName=this.$route.query.active
    }

  },

  components: {
    breadcrumb,
    paymentVue,
    receiptVue,
	supplierVue

  },
};
</script>

<style lang="scss" scoped>
.main {
  .mainTabs {


    ::v-deep .el-tabs__nav {
      margin-left: 38px;
    }

    ::v-deep .el-tabs__nav-scroll {
      background-color: #fff;
    }

    // 标签页切换按钮
    ::v-deep .el-tabs__item {
      height: 50px;
      width: 88px;
      text-align: center;
      padding: 0;
      line-height: 50px;
      font-size: 12px;
      font-weight: bold;
      color: #939393;
    }

    // 下边框
    ::v-deep .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: #F0F0F0;
    }

    // 标签页切换按钮 激活样式
    ::v-deep .el-tabs__item.is-active {
      background-color: #ECF5FE;
      color: #1890FF;
    }

    .main_item {
      padding: 0;
      background-color: #fff;
    }
  }

}</style>
